<!DOCTYPE html><html><head><title>05-第五章  字(font) text(文本)</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="05-第五章-字font-text文本">05-第五章  字(font) text(文本)</h1>

<p></p>

<hr>



<h2 id="一字font">一、字（font）</h2>

<p><code>font-family</code>   字体   </p>

<blockquote>
  <ul><li><code>*{font-family:'Microsoft yahei','宋体'；}</code> </li>
  </ul>
</blockquote>

<p><code>font-size</code> 字体大小  单位：px |%|em|rem</p>

<blockquote>
  <ul><li>%   -相对于父容器中字体%调整</li>
  <li>1em  -等于父级的字体尺寸— 相对于父级字体大小而言）</li>
  <li>rem -相对于html（根标签）的字体大小</li>
  </ul>
</blockquote>

<p><code>font-weight</code>   字体粗细</p>

<blockquote>
  <ul><li>normal  正常</li>
  <li>bold</li>
  <li>关键字 400  600 为字体粗细</li>
  </ul>
</blockquote>

<p><code>font-style</code>    字体类型（规定是否倾斜）</p>

<blockquote>
  <ul><li>normal      文字正常</li>
  <li>italic        文字斜体</li>
  <li>oblique      文字倾斜 </li>
  </ul>
</blockquote>

<p><code>line-height</code>   行高（设置行与行之间的距离） <br>
<code>font-variant</code>  规定小型大写字母的字体</p>

<blockquote>
  <ul><li>small-caps      小型大写字母。</li>
  </ul>
</blockquote>

<p>字体复合样式：</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs maxima"><div class="hljs-line"><span class="hljs-comment line-number">1.</span><span class="hljs-built_in">font</span>:<span class="hljs-built_in">font</span>-weight <span class="hljs-built_in">font</span>-variant <span class="hljs-built_in">font</span>-<span class="hljs-built_in">style</span>（ <span class="hljs-built_in">font</span>-size/line-<span class="hljs-built_in">height</span> <span class="hljs-built_in">font</span>-family）;
</div></code></pre>

<p>font基本形 font:font-size font-family;</p>

<blockquote>
  <p>color      文字颜色 <br>
   font会被继承   </p>
</blockquote>

<hr>



<h2 id="二文本text">二、文本（text）</h2>

<p>text-transform 文本的大小写</p>

<blockquote>
  <ul><li>uppercase    字母大写。</li>
  <li>lowercase 小写字母。</li>
  <li>capitalize                单词首字母大写.    </li>
  </ul>
</blockquote>

<p>text-align  文本水平对齐方式</p>

<blockquote>
  <ul><li>left     把文本排列到左边。</li>
  <li>center       居中对齐    </li>
  <li>right     把文本排列到右边。</li>
  <li>justify       实现两端对齐文本效果</li>
  </ul>
</blockquote>

<p>text-indent     首行缩进 （em） <br>
text-decoration 文本修饰</p>

<blockquote>
  <ul><li>underline   下划线 </li>
  <li>line-through  中划线 </li>
  <li>overline      上划线 </li>
  </ul>
</blockquote>

<p>letter-spacing  字（字母）间距 <br>
word-spacing    词（单词）间距 <br>
white-space 换行方式</p>

<blockquote>
  <ul><li>normal  默认</li>
  <li>nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 </li>
  </ul>
</blockquote>

<p>word-break:  break-all; 强制换行    </p>

<hr>



<h2 id="三-text-overflow-定义文本溢出时处理方式">三、 text-overflow 定义文本溢出时处理方式</h2>

<p>text-overflow：ellipsis  被修剪的文本用略符号来代表(<code>...</code>)。</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs css"><div class="hljs-line"><span class="hljs-comment line-number">1.</span>{   <span class="hljs-attribute">white-space</span>:nowrap;
</div><div class="hljs-line"><span class="hljs-comment line-number">2.</span>    <span class="hljs-attribute">overflow</span>:hidden;
</div><div class="hljs-line"><span class="hljs-comment line-number">3.</span>    <span class="hljs-attribute">text-overflow</span>:ellipsis;
</div><div class="hljs-line"><span class="hljs-comment line-number">4.</span> }
</div></code></pre>

<p>多行情况</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs css"><div class="hljs-line"><span class="hljs-comment line-number">1.</span>{   <span class="hljs-attribute">overflow</span>:hidden;
</div><div class="hljs-line"><span class="hljs-comment line-number">2.</span>    <span class="hljs-attribute">text-overflow</span>:ellipsis;
</div><div class="hljs-line"><span class="hljs-comment line-number">3.</span>    <span class="hljs-attribute">display</span>:-webkit-box;
</div><div class="hljs-line"><span class="hljs-comment line-number">4.</span>    <span class="hljs-attribute">-webkit-box-orient</span>:vertical;
</div><div class="hljs-line"><span class="hljs-comment line-number">5.</span>    <span class="hljs-attribute">-webkit-line-clamp</span>:<span class="hljs-number">2</span>;
</div><div class="hljs-line"><span class="hljs-comment line-number">6.</span> }
</div></code></pre>

<hr>



<h2 id="四字符实体">四、字符实体</h2>

<blockquote>
  <p><code>&amp;nbsp;</code>   空格符 <br>
  <code>&amp;lt;</code>  小于符号         &lt; <br>
  <code>&amp;gt;</code>  大于符号         &gt;  <br>
  <code>&amp;copy;</code>    版权       ©  <br>
  <code>&amp;reg;</code> 注册商标         ®</p>
</blockquote>

<p>更多参考<a href="http://www.w3school.com.cn/html/html_entities.asp" target="_blank">http://www.w3school.com.cn/html/html_entities.asp</a></p></div></body></html>